<template>
    <div class="fullPage" >
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.text}}</span>
            </div>
            <div class="filter">
                <ul class="lstFilters hidden">
                    <li
                        v-for="(item , index) in configs.tabs"
                        :key="index"
                        :class="index == configs.tabIndex?'active':''"
                        @click="onPickFilterItem(index)"
                    >
                        {{item.tabName}}
                    </li>
                </ul>
            </div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <div class="column">
                <div class="h-list">
                    <ul class="h-lst-item">
                        <li
                            v-for="(item , index) in configs.tabs"
                            :key="index"
                            :class="index == configs.tabIndex?'active':''"
                            @click="onPickFilterItem(index)"
                        >
                            {{item.tabName}}
                        </li>
                    </ul>
                </div>
                <div
                    v-for="(tab, tabInd) in configs.tabs"
                    :key="tabInd"
                    class="sec"
                    v-if="tabInd == configs.tabIndex"
                >
                    <el-table
                        :data="rowDatas"
                        style="width: 100%"
                        border
                        :height="ui.tabHeight"
                    >
                        <el-table-column
                            v-for = "(col, colIndex) in tab.cols"
                            :key="colIndex"
                            :prop="col.prop"
                            :label="col.lab"
                        ></el-table-column>
                        <el-table-column
                            fixed="right"
                            label="Action"
                            width="160">
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="showDlg(scope.row)"
                                type="text" >
                                <i class="fa fa-edit"></i> edit
                                </el-button>
                                <el-button
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text" >
                                <i class="fa fa-close"></i> remove
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

            </div>
        </div>

        <el-dialog
            :title="ui.title.text"
            :visible.sync="editDlg.show"
            :close-on-click-modal="false"
            width="700px"
            >

                <div class="formEditPan">
                    <div class="editRow"
                        v-for="(dataItem,ind ) in editDlg.fields"
                        :key="ind"
                    >
                        <div class="lab">{{dataItem.lab}}</div>
                        <div class="edit">
                            <el-input v-model="editDlg.info[dataItem.prop]"></el-input>
                        </div>
                    </div>
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editDlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
  mounted () {
    var me = this
    try {
      var path = 'squ/baseData/dataDict/'
      me.configs.tabs.forEach(t => {
        t.sqls = {}
        t.sqls.getItems = path + t.module + 'GetItems'
        t.sqls.new = path + t.module + 'New'
        t.sqls.update = path + t.module + 'Update'
        t.sqls.delete = path + t.module + 'delete'
        t.rowDatas = []
        t.cols.forEach(c => {
          c.prop = me.sys.first2Lower(c.field.replace('F_', ''))
        })
      })
      me.$nextTick().then(_ => {
        var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight
        me.ui.tabHeight = h
        me.onPickFilterItem(me.configs.tabIndex)
      })
    } catch (er) {
      console.log(er)
    }
  },
  data () {
    return {
      configs: {
        tabs: [
          {
            tabName: 'Function',
            module: 'function',
            cols: [
              { field: 'F_Category', lab: 'category', width: '', val: '' },
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Order', lab: 'order', width: '', val: '' },
              { field: 'F_Partic', lab: 'partic', width: '', val: '' }
            ],
            defaultValue: {
              order: 0
            }
          },
          {
            tabName: 'Position',
            module: 'position',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Order', lab: 'order', width: '', val: '' }
            ],
            defaultValue: {
              order: 0
            }
          },
          {
            tabName: 'ResultStatus',
            module: 'resultStatus',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_Comment', lab: 'comment', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' }
            ]
          },
          {
            tabName: 'ScheduleStatus',
            module: 'scheduleStatus',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_Comment', lab: 'comment', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' }
            ]
          },
          {
            tabName: 'ReportModule',
            module: 'reportModule',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_ExportName', lab: 'exportName', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Report', lab: 'report', width: '', val: '' },
              { field: 'F_Type', lab: 'type', width: '', val: '' },
              { field: 'F_TypeCode', lab: 'typeCode', width: '', val: '' }
            ]
          },
          {
            tabName: 'SportCode',
            module: 'sportCode',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_CodeEntity', lab: 'codeEntity', width: '', val: '' },
              { field: 'F_Discipline', lab: 'discipline', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Note', lab: 'note', width: '', val: '' },
              { field: 'F_Order', lab: 'order', width: '', val: '' }
            ],
            defaultValue: {
              order: 0
            }
          },
          {
            tabName: 'Event',
            module: 'event',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_Discipline', lab: 'discipline', width: '', val: '' },
              { field: 'F_Event', lab: 'event', width: '', val: '' },
              { field: 'F_Gender', lab: 'gender', width: '', val: '' },
              { field: 'F_LocalLongName', lab: 'localLongName', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_LongName', lab: 'longName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Order', lab: 'order', width: '', val: '' },
              { field: 'F_SES', lab: 'sES', width: '', val: '' },
              { field: 'F_TeamEvent', lab: 'teamEvent', width: '', val: '' },
              { field: 'F_TVName', lab: 'tVName', width: '', val: '' }
            ],
            defaultValue: {
              order: 0
            }
          },
          {
            tabName: 'Organisation',
            module: 'organisation',
            cols: [
              { field: 'F_Code', lab: 'code', width: '', val: '' },
              { field: 'F_LocalLongName', lab: 'localLongName', width: '', val: '' },
              { field: 'F_LocalName', lab: 'localName', width: '', val: '' },
              { field: 'F_LongName', lab: 'longName', width: '', val: '' },
              { field: 'F_Name', lab: 'name', width: '', val: '' },
              { field: 'F_Type', lab: 'type', width: '', val: '' }
            ],
            defaultValue: {
              order: 0
            }
          }
        ],
        tabIndex: 0
      },
      rowDatas: [],
      ui: {
        title: {
          text: 'Data Dictionary / 数据字典',
          icon: 'fa fa-book'
        },
        tabHeight: 200,
        tabCols: []

      },
      editDlg: {
        show: false,
        info: {},
        fields: []
      }
    }
  },
  methods: {
    onPickFilterItem (ind) {
      var me = this
      try {
        me.configs.tabIndex = ind
        me.refresh()
      } catch (er) {
        console.log(er)
      }
    },
    refresh () {
      var me = this
      try {
        me.editDlg.show = false
        var tab = me.configs.tabs[me.configs.tabIndex]
        var key = tab.sqls.getItems
        var ps = {}
        me.sys.query(key, ps).then(res => {
          tab.rowDatas = res
          me.rowDatas = res
        })
      } catch (er) {
        console.log(er)
      }
    },
    showDlg (row) {
      var me = this
      try {
        var dlg = {
          show: true,
          info: {},
          fields: []
        }
        var tab = me.configs.tabs[me.configs.tabIndex]
        dlg.fields = tab.cols
        if (row && row != null) {
          dlg.info = row
        } else {
          tab.cols.forEach(f => {
            dlg.info[f.prop] = ''
          })
          if (tab.defaultValue && Object.values(tab.defaultValue) > 0) {
            Object.keys(tab.defaultValue).forEach(k => {
              dlg.info[k] = tab.defaultValue[k]
            })
          }
          dlg.info[tab.module + 'Id'] = 0
        }
        me.editDlg = dlg
      } catch (er) {
        console.log(er)
      }
    },
    save () {
      var me = this
      try {
        var tab = me.configs.tabs[me.configs.tabIndex]
        var ps = me.editDlg.info
        var idKey = tab.module + 'Id'
        var idVal = ps[idKey] && ps[idKey] != null && ps[idKey] > 0 ? ps[idKey] : 0
        var key = idVal > 0 ? tab.sqls.update : tab.sqls.new
        me.sys.query(key, ps).then(res => {
          console.log(res)
          if (res && res.rowcount && res.rowcount > 0) {
            me.refresh()
          } else {
            me.$message.error('save action faild!')
          }
        })
      } catch (er) {
        console.log(er)
      }
    },
    deleteRow (row) {
      var me = this
      try {
        me.$confirm('此操作将永久删除该代码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var tab = me.configs.tabs[me.configs.tabIndex]
          var ps = {}
          ps[tab.module + 'Id'] = row[tab.module + 'Id']
          me.sys.query(tab.sqls.delete, ps).then(res => {
            if (res.rowcount > 0) {
              me.$message({
                message: 'delete action success.',
                type: 'success'
              })
              me.refresh()
            } else {
              me.$message.error('delete  action faild!')
            }
          })
        })
      } catch (er) {
        console.log(er)
      }
    }
  }

}
</script>

<style lang="less" scoped>
    @import url('../module.less');

    .column{
        height: 100%;
        padding-left:160px;
        position: relative;
        .h-list{
            position: absolute;
            left: 0;
            top: 0;
            ul.h-lst-item{
                li{
                    padding: 5px 0;
                    color: #888;
                }
                li:hover{
                    cursor: pointer;
                }
                li.active{
                    color: #0077fe;
                    font-weight: bold;
                }
            }
        }
    }

</style>
